<template>
    <div>
       <div class="Project_topTitle">
       <div @click="Onclick">
        精选专题
        <van-icon name="arrow" class="Project_icon" />
      </div>
    </div>
     <div class="Project_Titlebox">
      <div class="Project_Swiper">
           <div class="Project_box" v-for="(item,index) in ProjectTiele" :key="index">
                 <img :src="item.pic" alt=""  class="Project_box_img">
                 <div>
                    <p class="Project_title">{{item.title}}</p>
                    <p class="van-ellipsis">{{item.descript}}</p>
                </div>    
           </div>
      </div>
     </div>
      
    </div>
</template>
<script>
export default {
    data(){
        return{
        ProjectTiele:[]
        }
    },
    created(){
      this.$Api.YanxuanTitle().then(res=>{
        this.ProjectTiele= res.data.data
      })
    },
    methods:{
      Onclick(){
        this.$router.push({
          path:"/special"
        })
      }
    }
}
</script>
<style  scoped>
.Project_topTitle {
  width: 100%;
  height: 3rem;
  background-color: rgb(255, 255, 255);
  font-size: 1.1rem;
  line-height: 3rem;
  text-align: center;
}
.Project_icon {
  padding-top: 1rem;
  font-size: 0.9rem;
}
.Project_Titlebox{
  width: 100%;
  height: 19rem;
  overflow-y:scroll ;
}
.Project_Swiper{
  width: 100%;
  height: 12rem;
  flex-wrap: wrap;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}
.Project_box{
  width: 18rem;
  height: 16rem;
  margin-right: 1rem;
}
.Project_box_img{
  width: 100%;
  height: 12rem;
}
.van-ellipsis{
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #a7a4a4;
}
.Project_title{
   font-size: 0.8rem;
  margin-top: 0.5rem;
}
</style>